<template>
  <div>
    <!-- 头部标题 -->
    <van-nav-bar title="频道管理">
    </van-nav-bar>
    <!-- 我的频道 -->
    <div>
      <!-- 我的频道头部 -->
      <div class="header">
        <span>
          我的频道
          <span class="clickChannel">{{ isEdit ? '点击删除频道' : '点击进入频道' }}</span>
        </span>
        <span class="edit" @click="isEdit = !isEdit">{{ isEdit ? '完成' : '编辑' }}</span>
      </div>
      <!-- 我的频道标签部分 -->
      <div>
        <van-row>
          <van-col span="6" v-for="item in userChannelsList" :key="item.id" @click="operationChFn(item)">
            <div class="channels">
              {{item.name}}
              <van-icon v-if="isEdit && item.name !== '推荐'" name="cross" color="rgb(192, 192, 192)" size=" 10px" />
            </div>
          </van-col>
        </van-row>
      </div>

      <!-- 点击添加更多频道头部 -->
      <div class="header">
        <span>点击添加更多频道：</span>
      </div>
      <!-- 点击添加更多频道标签部分 -->
      <div>
        <van-row>
          <van-col span="6" v-for="item in unChannelsList" :key="item.id" @click="addChannelFn(item)">
            <div class=" channels">
              {{item.name}}
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    allChannelsList: Array,
    userChannelsList: Array
  },
  data() {
    return {
      isEdit: false // 判断编辑
    }
  },
  methods: {
    // 点击我的频道按钮操作频道
    operationChFn(ChannelObj) {
      if (this.isEdit && ChannelObj.name !== '推荐') {
        // 编辑状态点击删除频道，把频道信息返回给父组件
        this.$emit('removeChannel', ChannelObj)
      } else {
        // 非编辑状态点击进入频道
        this.$emit('intoChannel', ChannelObj)
      }
    },
    // 点击添加更多频道
    addChannelFn(obj) {
      if (this.isEdit) {
        this.$emit('addChannel', obj)
      }
    }
  },
  computed: {
    // 未被选中的频道
    unChannelsList() {
      return this.allChannelsList.filter(obj1 => {
        const index = this.userChannelsList.findIndex(obj2 => {
          return obj2.id === obj1.id
        })
        return index === -1
      })
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  display: flex;
  font-size: 16px;
  justify-content: space-between;
  margin: 5px 0 16px 10px;
  .clickChannel {
    font-size: 14px;
    color: rgb(192, 192, 192);
  }
  .edit {
    margin-right: 10px;
  }
}

.van-row {
  font-size: 14px;
  text-align: center;
  margin-left: 10px;
  .channels {
    position: relative;
    height: 32px;
    line-height: 32px;
    margin-bottom: 10px;
    margin-right: 10px;
    border: 1px solid rgb(182, 182, 182);
    .van-icon {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
}
</style>
